<template>
  <el-card class="main">
    <DstForm ref="DstForm"
             v-model="ruleForm"
             :data-arr="dataArr" />
    <el-button class=""
               @click="clickShowExport()">查看数据</el-button>
    <!-- <draggable v-model="dataArr2" :group="{ name: 'people1'}" :list="dataArr2">
      <div v-for="element in dataArr2"
           :key="element.label">{{ element.label }}</div>
    </draggable> -->
  </el-card>
</template>

<script>
import DstForm from '@/portal-common/components/DstForm/indexDrag.vue'
import draggable from 'vuedraggable'
import { dataArr } from '../function/data'
export default {
  components: {
    DstForm,
    draggable,
  },
  props: {
    formList: {
      type: Array,
      default() {
        return []
      },
    },
  },
  data() {
    return {
      ruleForm: {},
      dataArr: dataArr(this), // 为了内部可以拖拽，所以不能使用计算属性生成
      currentIndex: null, // 当前字段index
      currentFormIndex: 0, // 当前表单字段
    }
  },
  mounted() {
    // 右侧点击保存事件
    this.$EventBus.$on('saveValueCommonParams', this.saveValueCommonParams)
    // 左侧点击添加一项表单元素
    this.$EventBus.$on('addFormItem', this.addFormItem)
  },
  methods: {
    // 将right模块的数据保存到main模块
    saveValueCommonParams({ item, index }) {
      // this.dataArr[index] = item
      this.dataArr.splice(index, 1, item)
    },
    // 左侧点击添加一项表单元素,根据点击的类型在表单中添加一项
    addFormItem({ item }) {
      if (!item.isNoProp) {
        item.prop = 'auto' + new Date().getTime()
      }
      this.dataArr.push(item)
      console.log(this.dataArr, 11199999)
    },
    clickShowExport() {
      console.log(this.dataArr, 99999)
    },
  },
}
</script>

<style></style>
